<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:h="http://java.sun.com/jsf/html">
    <p:blockUI block=":frmListarUsuarios" widgetVar="blkSearch" trigger=":frmListarUsuarios:searchPersonalBtn" >  
                Espere mientras carga el sistema<br /> 
                <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/> 
    </p:blockUI>
    <h:form id="frmListarUsuarios">
        <p:growl showSummary="false" showDetail="true" id="msjBuscaUsuario"/>
        <table>
            <tbody>
                <tr>
                    <td>
                        <table width="100%">
                            <colgroup>
                                <col width="60"/>
                                <col width="100"/>
                                <col width="60"/>
                                <col width="370"/>
                                <col width="60"/>
                            </colgroup>
                            <tr>
                                <td>
                                    <h:outputText value="Código :"/> 
                                </td>
                                <td>
                                    <p:inputText id="txtBusCodUsuario" style="width: 100px" 
                                                 maxlength="20" value="#{reporteConexionesPorUsuariosController.busCodUsuario}">
                                    </p:inputText>
                                </td>
                                <td>
                                    <h:outputText value="Nombre :"/> 
                                </td>
                                <td>
                                    <p:inputText id="txtBusNomUsuario" value="#{reporteConexionesPorUsuariosController.busNomUsuario}" style="width: 364px;" maxlength="150">
                                    </p:inputText>                                    
                                </td>
                                <td>
                                    <p:commandButton icon="ui-icon-search" actionListener="#{reporteConexionesPorUsuariosController.searchUsuario}" 
                                                     update="grdListadoUsuarios, msjBuscaUsuario" process="@this, txtBusCodUsuario, txtBusNomUsuario"
                                                     id="searchPersonalBtn">
                                    </p:commandButton>
                                </td>
                            </tr>                                
                       </table>                 
                    </td>
                </tr>
                <tr>
                    <td>
                        <p:dataTable id="grdListadoUsuarios" 
                                     value="#{reporteConexionesPorUsuariosController.lstUsuarios}" 
                                     var="item" rowKey="#{item}"
                                     selectionMode="single" 
                                     scrollable="true" scrollHeight="200"
                                     rowIndexVar="index"
                                     emptyMessage="Filtro sin resultados.">
                             <p:column width="50" style="text-align: center;" >
                                 <f:facet name="header">
                                     <h:outputText value="Código Usuario"/>
                                 </f:facet>
                                 <h:outputText value="#{item.COD_USUARIO}"/>
                             </p:column>
                             <p:column id="colApepaterno" width="300" style="text-align: center;" >
                                 <f:facet name="header">
                                     <h:outputText value="Apellido Y Nombres "/>
                                 </f:facet>
                                 <div style="text-align: left;" > 
                                     <h:outputText value="#{item.NOMBRES}" >
                                     </h:outputText>
                                 </div>          
                             </p:column>
                             <p:column id="colTipoUsuario" width="140" style="text-align: center;" >
                                 <f:facet name="header">
                                     <h:outputText value="Tipo Usuario"/>
                                 </f:facet>
                                 <div style="text-align: left;" > 
                                     <h:outputText value="#{item.TIPO_USUARIO}" >
                                     </h:outputText>
                                 </div>          
                             </p:column>
                            <p:column width="30" style="text-align:center;">
                                <p:commandButton icon="ui-icon-check" id="btnoSeleccionarUsuario"
                                                 actionListener="#{reporteConexionesPorUsuariosController.actualizarUsuarioSeleccion(item)}"
                                                 oncomplete="buscaUsuario.hide()"  
                                                 style="width:20px; height: 20px;" 
                                                 update=":frmReporteConexionUsuario"/>
                            </p:column>
                        </p:dataTable>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p:toolbar style="padding: 3px;">
                            <p:toolbarGroup align="right">
                                <p:commandButton process="@this"  
                                                 value="Cerrar" 
                                                 icon="ui-icon-close" 
                                                 onclick="buscaUsuario.hide()"/>
                            </p:toolbarGroup>
                        </p:toolbar>
                    </td>
                </tr>
            </tbody>
        </table>
    </h:form>
</ui:composition>